<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8" />
	<title>@scroll-timeline</title>
	<style>
                #g-content {
                width: 300px;
                height: 170vh;
                background: #999;
                }
                #g-box {
                font-size: 150px;
                margin: 70vh auto 0;
                animation-name: rotate;
                animation-duration: 3s;
                animation-direction: alternate;
                animation-easing-function: linear;
                animation-timeline: box-rotate;
                }
                @keyframes rotate {
                0% {
                        transform: rotate(0);
                }
                100% {
                        transform: rotate(360deg);
                }
                }
                @scroll-timeline box-rotate {
                source: selector("#g-content");
                }


	</style>
</head>

<body>

        <div id="g-content">
                <div id="g-box">F</div>
            </div>

</body>

</html>
